<script setup lang="ts">
import { ref, onUnmounted, reactive } from 'vue';
import EstunTopOpt from './_EstunTopOpt.vue';

const props: any = defineProps<{
    ujt: any;
}>();
const menus = [
    { label: '配置', value: 'menu1' },
    { label: '仿真', value: 'menu2' },
    { label: '工程', value: 'menu3' },
    { label: '看板', value: 'menu4' },
    { label: '日志', value: 'menu5' },
];
const opt = reactive({
    curItem: {},
});
</script>
<template>
    <div class="as-estun-top">
        <EstunTopOpt :ujt="ujt"></EstunTopOpt>
        <div class="menus">
            <div
                v-for="item in menus"
                @pointerdown.stop="opt.curItem = item"
                :class="{ cur: opt.curItem.value == item.value }"
            >
                {{ item.label }}
            </div>
        </div>
        <div class="ver">Ver 1.10.3</div>
        <div class="user">用户</div>
    </div>
</template>

<style scoped lang="scss">
.as-estun-top {
    height: 60px;
    background-color: var(--cm2);
    display: flex;
    align-items: center;
    .menus {
        flex-grow: 1;
        display: flex;
        > div {
            cursor: pointer;
            padding: 8px 20px;
            margin: 0 5px;
            border-radius: 6px;
            font-size: 22px;
            letter-spacing: 3px;
            &.cur,
            &:hover {
                background-color: var(--cm4);
            }
            &.cur {
                font-weight: bold;
            }
        }
    }
    .ver,
    .user {
        padding: 0 20px;
        width: auto;
    }
}
</style>
